<template>
  <div>
    <h1 style="font-size: 30px">音乐馆</h1>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="精选" name="first">精选</el-tab-pane>
      <el-tab-pane label="排行" name="second">
        <Ranking :Rankinglist="RankingList"></Ranking>
      </el-tab-pane>
      <el-tab-pane label="有声电台" name="third">有声电台</el-tab-pane>
      <el-tab-pane label="歌手" name="fourth">歌手</el-tab-pane>
      <el-tab-pane label="分类歌单" name="five">分类歌单</el-tab-pane>
      <el-tab-pane label="数字专辑" name="six">数字专辑</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Ranking from '../components/Ranking.vue'
import { Toplist } from '../api/MusicHallApi'
export default {
  data () {
    return {
      activeName: 'second',
      RankingList: []
    }
  },
  created () {
    this.getToplist()
  },
  components: {
    Ranking
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    async getToplist () {
      const { data } = await Toplist()
      try {
        console.log(data)
        this.RankingList = data.list
        console.log(this.RankingList)
      } catch (error) {}
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-tabs__nav-wrap::after {
  height: 0;
  width: 0;
}
/deep/ .el-tabs__item {
  margin-top: 8px;
  padding: 0px 40px;
  font-size: 16px;
  color: #ebeef5;
}
</style>
